.comment-item {
    padding: 30rpx 0;
    margin: 0 20rpx;
    position: relative;

    .comment-header {
        display: flex;
        align-items: center;
        height: 60rpx;

        .author-avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            background: #f7f7f7;
        }

        .author-info {
            display: flex;
            margin-left: 20rpx;
            flex: 1;

            .author-name {
                font-size: 24rpx;
                font-weight: 400;
            }

            .is-author {
                margin-left: 16rpx;
                height: 32rpx;
                line-height: 24rpx;
                font-size: 20rpx;
                color: #fff;
                padding: 4rpx;
                text-align: center;
                border-radius: 6rpx;
                opacity: .85;
                background-color: var(--color-theme);
            }

            .author-rating {
                height: 32rpx;
                line-height: 32rpx;
            }
        }

        .more {
            width: 40rpx;
            text-align: center;
        }
    }

    .comment-content {
        font-size: 28rpx;
        padding: 12rpx 0 4rpx 70rpx;
        line-height: 44rpx;
        color: var(--color-text-primary);
        word-break: break-all;

        .is-delete {
            display: inline-block;
            padding: 0 12rpx;
            background-color: #f5f5f5;
            font-size: 24rpx;
            border-radius: 6rpx;
            color: var(--color-text-secondary);
        }
    }

    .comment-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12rpx 0 0 70rpx;
        height: 44rpx;
        color: var(--color-text-secondary);
        font-size: 24rpx;

        &::before {
            content: "";
            border-bottom: 1rpx solid #f5f5f5;
            background: #f0f0f0;
            position: absolute;
            left: 70rpx;
            right: 0;
            bottom: 0;
        }

        .tool-list {
            display: flex;
            align-items: center;

            .tool-item {
                padding: 5rpx 10rpx;
                min-width: 70rpx;
                text-align: right;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .like-icon {
                    margin-left: 6rpx;

                    &.is-active {
                        animation: jump 0.4s ease-in-out;
                    }

                    &.is-disabled {
                        animation: none;

                        .m-icon {
                            color: #ccc !important;
                        }
                    }
                }

                .m-icon {
                    font-size: 24rpx;
                }
            }
        }
    }
}

@keyframes jump {
    0% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}